<template>
  <div style="padding:3%">
    <el-row>
      <el-col :span="12">
        <el-form :model="form" ref="videoForm" label-width="200px" label-suffix="：">
          <el-form-item label="上传头像">
            <el-upload class="avatar-uploader"
            :action="getDomain()+'/msmis/api/sp/uploadProcessionPersonPhoto'"
            :show-file-list="false"
            :headers="header"
            :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item v-for="(v,k,i) in form" :label="labels[i]" :key="v.id" :prop="k">
            <el-select v-if="k=='ethnicity'" filterable v-model="form[k]">
              <el-option v-for="(v,i) in EthnicityType" :key="i" :value="v.ethnicity" :label="v.ethnicityName"></el-option>
            </el-select>
            <el-select v-else-if="k=='politics'" filterable v-model="form[k]">
              <el-option v-for="(v,i) of Politics" :key="i" :value="v.politicsTypeValue" :label="v.politicsTypeName"></el-option>
            </el-select>
            <el-select v-else-if="k=='maritalStatus'" filterable v-model="form[k]">
              <el-option v-for="(v,i) of Marital" :key="i" :value="v.maritalStatus" :label="v.maritalStatusName"></el-option>
            </el-select>
            <el-select v-else-if="k=='education'" filterable v-model="form[k]">
              <el-option v-for="v of EducationType" :key="v.id" :label="v.educationTypeName" :value="v.education"></el-option>
            </el-select>
            <el-select v-else-if="k=='religiousBelief'" v-model="form[k]">
              <el-option v-for="v of ReligiousBeliefType" :key="v.id" :label="v.religiousBeliefName" :value="v.religiousBelief"></el-option>
            </el-select>
            <el-select v-else-if="k=='processionID'" v-model="form[k]">
              <el-option v-for="v of Processions" :key="v.id" :value="v.id" :label="v.processionName"></el-option>
            </el-select>
            <el-date-picker v-else-if="k=='birthDate'" v-model="form[k]" placeholder=""></el-date-picker>
            <el-radio-group v-else-if="k=='sex'" v-model="form[k]">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
            <el-input v-else v-model="form[k]"></el-input>
          </el-form-item>
          <el-form-item align="center">
            <el-button @click="$router.go(-1)">返回</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
            <el-button type="primary" @click="addNewRecord">添加</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as api from "@/api/skynetManage";
import * as api2 from "@/api/zonghezhili/duiwujianshe";
import { getToken } from '../../utils/auth';

export default {
  data() {
    return {
      header:{
        token:getToken()
      },
      imageUrl: "",
      form: {
        processionID: "", // bigint(20) DEFAULT NULL,
        certifID: "", // char(18) NOT NULL COMMENT '身份证号. 编码应符合GB 11643',
        name: "", // varchar(50) DEFAULT NULL,
        sex: "", // char(1) DEFAULT NULL COMMENT '1=男性；0=女性，编码应符合 GB/T 2261.1',
        birthDate: "", // date DEFAULT NULL COMMENT '出生日期，格式为“YYYYMMDD”',
        ethnicity: "", // char(2) DEFAULT NULL COMMENT '出生日期',
        nativePlace: "", // varchar(20) DEFAULT NULL COMMENT '籍贯，出生地，老家编码应符合GB/T 2260',
        politics: "", // char(2) DEFAULT NULL COMMENT '政治面貌，编码应符合GB/T 4762',
        maritalStatus: "", // char(2) DEFAULT NULL COMMENT '婚姻状况编码，编码应符合GB/T 2261.2',
        education: "", // char(2) DEFAULT NULL COMMENT '学历类型编码，编码应符合GB/T 4658',
        religiousBelief: "", // char(2) DEFAULT NULL COMMENT '宗教信仰类型编码，编码应符合GA 214.12',
        mobileTel: "", // varchar(18) DEFAULT NULL COMMENT '移动电话',
        fixedTel: "", // varchar(18) DEFAULT NULL COMMENT '固定电话',
        presentAddress: "", // char(6) DEFAULT NULL COMMENT '现住地，编码应符合GB/T 2260',
        presentAddressDetail: "" // varchar(200) DEFAULT NULL COMMENT '现住地门(楼)详细地址',
      },
      labels: [
        "所属队伍",
        "身份证号",
        "姓名",
        "性别",
        "出生日期",
        "民族",
        "籍贯",
        "政治面貌",
        "婚姻状况",
        "学历",
        "宗教信仰",
        "移动电话",
        "固定电话",
        "现住地",
        "现住地门(楼)详细地址"
      ],
      EducationType: [],
      EthnicityType: [],
      Politics: [],
      Marital: [],
      ReligiousBeliefType: [],
      Processions: [],
      imgId: null
    };
  },
  methods: {
    getDomain(){
      return 'http://' + window.location.host;
    },
    handleAvatarSuccess(res, file) {
      this.imgId = res.data; // 保存头像的id
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    reset() {
      for (var key in this.form) {
        this.form[key] = "";
      }
    },
    addNewRecord() {
      if (this.imgId != null) {
        api.addProcessionPerson(this.form,this.imgId).then(res => {
          if (res.data) {
            this.$message({
              type: "success",
              message: "添加成功!"
            });
            this.reset()
            this.imgId = null
            this.imageUrl = ''
          } else {
            this.$message({
              type: "error",
              message: res.message
            });
          }
        });
      }else{
          this.$message({
              type:'error',
              message:'请上传头像!'
          })
          return
      }
    }
  },
  mounted() {
    api2.fetchServedPersonManageTypes().then(res => {
      this.EducationType = res.data.codeEducationTypeMapper; // 学历
      this.Marital = res.data.codeMaritalStatusType;
      this.Politics = res.data.codePoliticsType;
      this.EthnicityType = res.data.codeEthnicityType;
      this.ReligiousBeliefType = res.data.codeReligiousBeliefType;
    });
    api.getAllProcession().then(res => {
      this.Processions = res.data;
    });
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
